Hi, I've a div in a absolute position with a default "top" value set to "-200px". When i click on the div the "top" value is updated to "0". In this way I see the entire Div.

This is the js:

$(document).ready(function(){
  $("#search_bar").click(function () {
    $(this).css("top","0");
  });
});

Is there a way to achieve this result but with an animation? For example, a slide down effect?

Also, when i click another time to the div I'd like that the "top" value will be restored to "-200px".